<template>
  <main>
    <section class="introduce">
      <div class="content flex w-m-1380 pl-60">
        <div class="left">
          <h3>用思维导图整理您的想法</h3>
          <p class="desc">轻松组织思想，提高效率，激发创意。我们的思维导图工具帮助您清晰地可视化和连接想法。</p>
          <div class="operate">
            <el-button type="primary" size="large" @click="router.push('/home')">免费开始使用<i class="ri-arrow-right-long-line"></i></el-button>
            <el-button size="large">查看演示</el-button>
          </div>
        </div>
        <div class="right">
          <img src="@/assets/images/introduce/introduce-1.png" alt="logo">
        </div>
      </div>
    </section>
    <section class="feature">
      <div class="content flex w-m-1380 pl-60">
        <h3 class="align-c">思维导图的核心功能</h3>
        <p class="feature-desc align-c">我们的思维导图工具提供了一系列功能，帮助您更有效地组织和发展您的想法。</p>
        <div class="feature-list">
          <div class="feature-item align-c" v-for="(item, index) in MIND_FEATURE_INTRODUCE" :key="index">
            <div class="icon"><i :class="item.icon"></i></div>
            <h5 class="title align-c">{{ item.name }}</h5>
            <p class="desc align-c">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </section>
    <section class="advantage">
      <div class="content flex w-m-1380 pl-60">
        <h3 class="align-c">思维导图的优势</h3>
        <p class="advantage-desc align-c">思维导图不仅是一种工具，更是一种思考方式。</p>
        <div class="advantage-list">
          <div class="advantage-item" v-for="(item, index) in MIND_ADVANTAGE" :key="index">
            <h5 class="title">{{ item.name }}</h5>
            <p class="desc">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </section>
    <section class="travel-mind">
      <div class="content flex w-m-1380 pl-60">
        <h3 class="align-c">立即开始您的思维导图之旅</h3>
        <p class="travel-mind-desc align-c">免费注册，开始创建您的第一个思维导图。</p>
        <div class="operate-btn">
          <el-button type="primary" size="large" @click="router.push('/signin')">免费注册<i class="ri-arrow-right-long-line"></i></el-button>
        </div>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { MIND_FEATURE_INTRODUCE, MIND_ADVANTAGE } from '@/config/common.config'

const router = useRouter()
</script>

<style lang="scss" scoped>

section {
  &:nth-child(2n + 1) {
    background-color: #fff;
  }

  &:nth-child(2n) {
    background-color: #f9f9f9;
  }
}
.introduce {
  height: calc(100vh - 60px);
  .content {
    height: 100%;
    display: flex;
    align-items: center;
    .left {
      width: 45%;
      flex-shrink: 0;
      padding-right: 20px;
      h3 {
        font-size: 3.2rem;
        line-height: 1.2;
      }
      .desc {
        font-size: 1.2rem;
        line-height: 1.75rem;
        margin: 1.5rem 0;
        color: #71717a;
      }
      .operate {
        margin-top: 2.5rem;
        .ri-arrow-right-long-line {
          margin-left: 8px;
          font-size: 18px;
        }
      }
    }
    .right {
      font-size: 0;
      flex: 1;
      width: 0;
      overflow: hidden;
      padding: 4rem 1rem;
      border-radius: 10px;
      background-color: #2C2D30;
      img {
        width: 100%;
      }
    }
  }
}

.feature {
  height: calc(100vh - 60px);
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    h3 {
      font-size: 2rem;
      line-height: 1.2;
    }
    .feature-desc {
      font-size: 1rem;
      line-height: 1.75rem;
      margin: 0.8rem 0;
      color: #71717a;
    }
    .feature-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      margin-top: 2rem;
      .feature-item {
        border: 1px solid #cccccc90;
        border-radius: 12px;
        padding: 1rem;
        .icon {
          border-radius: 50%;
          background-color: #e2e2e3;
          display: inline-block;
          padding: 11px 12px;
          margin: 1rem auto 0.8rem;
          i {
            font-size: 24px;
            color: #333;
          }
        }
        .title {
          font-size: 1.2rem;
          line-height: 1.2;
          margin: 0.7rem 0;
        }
        .desc {
          color: #999;
          font-size: 0.9rem;
          line-height: 1.3;
        }
      }
    }
  }
}

.advantage {
  height: calc(100vh - 60px);
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    h3 {
      font-size: 2rem;
      line-height: 1.2;
    }
    .advantage-desc {
      font-size: 1rem;
      line-height: 1.75rem;
      margin: 0.8rem 0;
      color: #71717a;
    }
    .advantage-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 2rem;
      .advantage-item {
        border: 1px solid #cccccc90;
        border-radius: 12px;
        padding: 1rem;
        .icon {
          border-radius: 50%;
          background-color: #e2e2e3;
          display: inline-block;
          padding: 11px 12px;
          margin: 1rem auto 0.8rem;
          i {
            font-size: 24px;
            color: #333;
          }
        }
        .title {
          font-size: 1.4rem;
          line-height: 1.2;
          margin: 0.7rem 0;
        }
        .desc {
          color: #999;
          font-size: 0.9rem;
          line-height: 1.5;
        }
      }
    }
  }
}

.travel-mind {
  padding: 8rem 0;
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    h3 {
      font-size: 2rem;
      line-height: 1.2;
    }
    .travel-mind-desc {
      font-size: 1rem;
      line-height: 1.75rem;
      margin: 0.8rem 0;
      color: #71717a;
    }

    .operate-btn {
      width: 20rem;
      margin-top: 1.5rem;
      .el-button {
        width: 100%;
        height: 42px;
      }
      .ri-arrow-right-long-line {
        margin-left: 6px;
        font-size: 18px;
      }
    }
  }
}
</style>
